<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <title>我的三中恋爱物语果然没问题</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <style>
    :root{
      --bg:#081423;
      --panel: rgba(255,255,255,0.02);
      --bubble:#0f2330;
      --muted:#9fb0c8;
      --text:#eaf4ff;
      --accent:#6fc3ff;
      --avatar-size:44px;
      --button-bg: rgba(111, 195, 255, 0.1);
      --button-hover: rgba(111, 195, 255, 0.2);
      --button-disabled: rgba(159, 176, 200, 0.1);
      --button-border: 1px solid rgba(111, 195, 255, 0.3);
    }
    html,body{ 
      height:100%; 
      margin:0; 
      font-family: "Microsoft Yahei", "Segoe UI", Roboto, Arial; 
      background:linear-gradient(180deg,var(--bg),#04131a); 
      color:var(--text);
      display:flex;
      align-items:center;
      justify-content:center;
    }

    /* 整体容器 */
    .update-container {
      max-width:800px;
      width:90%;
      margin:28px auto;
      padding:0;
      position:relative;
    }

    /* 更新日志容器 */
    .update-root {
      padding:24px;
      border-radius:10px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.6);
      background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
    }

    /* 更新标题 */
    .update-title {
      font-size:28px;
      font-weight:700;
      color:var(--accent);
      text-align:center;
      margin-bottom:20px;
      padding:12px;
      background: rgba(111, 195, 255, 0.05);
      border-radius:8px;
      border:1px solid rgba(111, 195, 255, 0.1);
    }

    /* 版本信息 */
    .version-info {
      text-align:center;
      font-size:16px;
      color:var(--muted);
      margin-bottom:24px;
    }

    /* 更新内容列表 */
    .update-content {
      background: rgba(0,0,0,0.12);
      border-radius:10px;
      padding:20px;
      margin-bottom:30px;
      border:1px solid rgba(255,255,255,0.03);
      max-height:60vh;
      overflow-y:auto;
    }

    /* 更新项 */
    .update-item {
      margin-bottom:16px;
      padding-bottom:16px;
      border-bottom:1px solid rgba(255,255,255,0.03);
    }
    .update-item:last-child {
      border-bottom:none;
      margin-bottom:0;
      padding-bottom:0;
    }

    /* 更新项标题 */
    .update-item-title {
      font-size:18px;
      font-weight:600;
      color:var(--accent);
      margin-bottom:10px;
      display:flex;
      align-items:center;
      gap:8px;
    }

    /* 更新描述 */
    .update-description {
      font-size:16px;
      line-height:1.6;
      color:var(--text);
      padding-left:24px;
    }
    .update-description li {
      margin-bottom:8px;
    }

    /* 按钮容器 */
    .button-container {
      display:flex;
      justify-content:center;
      margin-top:30px;
    }

    /* 操作按钮样式 */
    .confirm-button {
      padding:16px 40px;
      background:var(--button-bg);
      color:var(--text);
      border:var(--button-border);
      border-radius:8px;
      font-size:18px;
      font-weight:600;
      cursor:pointer;
      transition: all 0.2s ease;
      position:relative;
      overflow:hidden;
      text-align:center;
    }
    .confirm-button::before {
      content:'';
      position:absolute;
      top:0;
      left:-100%;
      width:100%;
      height:100%;
      background:linear-gradient(90deg, transparent, rgba(111, 195, 255, 0.1), transparent);
      transition: left 0.5s ease;
    }
    .confirm-button:hover {
      background:var(--button-hover);
      transform: translateY(-1px);
      box-shadow:0 4px 12px rgba(111, 195, 255, 0.2);
    }
    .confirm-button:hover::before {
      left:100%;
    }
    .confirm-button:active {
      transform: translateY(0);
    }

    /* 图标样式 */
    .icon {
      font-size:20px;
      color:var(--accent);
    }

    /* 移动设备响应式 */
    @media(max-width:640px){
      .update-root {
        padding:16px;
      }
      .update-title {
        font-size:24px;
        padding:10px;
      }
      .update-content {
        padding:16px;
      }
      .update-item-title {
        font-size:16px;
      }
      .update-description {
        font-size:15px;
        padding-left:20px;
      }
      .confirm-button {
        padding:14px 32px;
        font-size:16px;
      }
    }
  </style>
</head>
<body>
  <div class="update-container">
    <div class="update-root">
      <h1 class="update-title">11.9版本更新</h1>
      <div class="version-info">我的三中恋爱物语果然没问题</div>
      
      <div class="update-content">
        <!-- 更新项 1 -->
        <div class="update-item">
          <div class="update-item-title">
            <span class="icon">✨</span>
            新增女主
          </div>
          <ul class="update-description">
            <li>新增「黑毛黑框厨」好感度剧情线
          </ul>
        </div>
        
        <!-- 更新项 2 -->
        <div class="update-item">
          <div class="update-item-title">
            <span class="icon">📖</span>
            剧情更新
          </div>
          <ul class="update-description">
            <li>新增AUV表白维什戴尔剧情</li>
          </ul>
          <ul class="update-description">
            <li>新增易先生干那件事剧情</li>
          </ul>
        </div>
        
        <!-- 更新项 3 -->
        <div class="update-item" style="display: none;">
          <div class="update-item-title">
            <span class="icon">⚡</span>
            系统更新
          </div>
          <ul class="update-description">
            <li>新增保险（投保）系统</li>
          </ul>
          <ul class="update-description">
            <li>新增数值投放点，解决进入sagi线时，至的剧情无法推进的问题</li>
          </ul>
          <ul class="update-description">
            <li>调整兼职难度，新增游戏策划兼职档位</li>
          </ul>
          <ul class="update-description">
            <li>调整部分商品价格</li>
          </ul>
        </div>
      
      <div class="button-container">
        <button id="confirmBtn" class="confirm-button">开始游戏</button>
      </div>
    </div>
  </div>

  <script>
    document.getElementById('confirmBtn').addEventListener('click', function() {
      window.location.href = 'main.html';
    });
    
    // 添加键盘Enter键支持
    document.addEventListener('keydown', function(event) {
      if (event.key === 'Enter') {
        window.location.href = 'main.html';
      }
    });
  </script>
</body>
</html>